<template>
	<div class="page-container">
		<el-card class="page-form-card">
			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px" status-icon>
				<el-form-item v-for="(item, i) in list" :key="i" :label="`${item.remark}:`" :rules="{ required: true }">
					<template v-if="item.dictLabel === 'start' || item.dictLabel === 'end'">
						<el-switch
							v-model="item.dictValue"
							active-color="#00e266"
							inactive-color="#e2e2e3"
							active-value="1"
							inactive-value="0"
						>
						</el-switch>
					</template>
					<template v-else-if="item.dictLabel === 'start_message'">
						<el-input v-model.trim="item.dictValue" class="!md:w-[302px]" :rows="7" maxlength="100" show-word-limit :placeholder="`请输入${item.remark}`" type="textarea"></el-input>
					</template>
					<template v-else-if="item.dictLabel === 'avatar_user' || item.dictLabel === 'avatar_customer'">
						<l-upload-image v-model="item.dictValue" :limit="1" height="106px" width="106px" class="about__image">
						<div class="flex flex-col">
							<svg-icon icon-class="add" size="20px" color="#4C59C6"></svg-icon>
							<el-tooltip effect="dark" placement="top" popper-class="tips">
								<div slot="content">推荐尺寸<br />200*200</div>
								<div class="text-[14px] text-[#cccccc] cursor-pointer mt-[19px]"><svg-icon icon-class="wenhao" color="#4C59C6" size="14px"></svg-icon></div>
							</el-tooltip>
						</div>
					</l-upload-image>
					</template>
					<template v-else-if="item.dictLabel === 'start_time' || item.dictLabel === 'end_time'">
						<el-time-picker
							v-model="item.dictValue"
						>
  					</el-time-picker>
					</template>
					<template v-else>
						<el-input v-model.trim="item.dictValue" class="!md:w-[300px]"></el-input>
					</template>
				</el-form-item>
				<!-- <el-form-item label="启用问候语:" prop="uuid">
					<el-switch
						v-model="form.value"
						active-color="#00e266"
						inactive-color="#e2e2e3">
					</el-switch>
				</el-form-item>
				<el-form-item label="问候语:" prop="remark">
					<el-input v-model.trim="form.remark" class="!md:w-[302px]" :rows="7" maxlength="100" show-word-limit placeholder="请输入问候语" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="启用下班问候语:" prop="uuid">
					<el-switch
						v-model="form.value"
						active-color="#00e266"
						inactive-color="#e2e2e3">
					</el-switch>
				</el-form-item>
				<el-form-item label="下班问候语:" prop="remark">
					<el-input v-model.trim="form.remark" class="!md:w-[302px]" :rows="7" maxlength="100" show-word-limit placeholder="请输入下班问候语" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="客服上班时间:" prop="time">
					<el-time-picker
						is-range
						v-model="form.time"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						placeholder="选择时间范围">
					</el-time-picker>
				</el-form-item>
				<el-form-item label="客服头像:" prop="platformImg">
					<l-upload-image v-model="form.platformImg" :limit="1" height="106px" width="106px" class="about__image">
						<div class="flex flex-col">
							<svg-icon icon-class="add" size="20px" color="#4C59C6"></svg-icon>
							<el-tooltip effect="dark" placement="top" popper-class="tips">
								<div slot="content">推荐尺寸<br />200*200</div>
								<div class="text-[14px] text-[#cccccc] cursor-pointer mt-[19px]"><svg-icon icon-class="wenhao" color="#4C59C6" size="14px"></svg-icon></div>
							</el-tooltip>
						</div>
					</l-upload-image>
				</el-form-item> -->
				<el-form-item>
					<el-button class="w-[107px] !h-[40px]" type="primary" @click="save">保存</el-button>
					<!-- <el-button class="w-[107px] !h-[40px]" @click="reset">重置</el-button> -->
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import { getUser, recharge } from '@/api/mall/topup';
import { listData, updateDataList } from '@/api/system/dict/data';

export default {
	name: 'TopUp',
	data() {
		return {
			form: {
				reChargeType: 1,
				value: 1,
				type: 1,
				id: '',
				remark: '',
				time: [new Date(2016, 9, 10, 8, 0), new Date(2016, 9, 10, 18, 0)],
				platformImg: ''
			},
			rules: {
				uuid: [
					{ required: true, message: '请输入用户ID', trigger: 'blur' },
					{ min: 6, max: 6, message: '请输入6位数的用户ID', trigger: 'blur' },
				],
				reChargeType: [{ required: true, message: '请选择充值类型', trigger: 'change' }],
				type: [{ required: true, message: '请选择类型', trigger: 'change' }],
				value: [{ required: true, message: '请输入调整金额', trigger: 'blur' }],
				remark: [{ required: true, message: '请输入说明', trigger: 'blur' }],
			},
			mobile: '',
			flag: false,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				dictName: undefined,
				dictType: undefined,
				status: undefined,
			},
			list: []
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.queryParams.dictType = 'openIM';
			listData(this.queryParams).then((res) => {
				const list = []
				const arr = ['adminUserId', 'secret', 'url']
				res.rows.forEach(item => {
					if (!arr.includes(item.dictLabel)) {
						list.push(item)
					}
				});
				this.list = list
			});
		},
		save() {
			let dataList = this.list;
			for (let item in dataList) {
				if (dataList.hasOwnProperty(item)) {
					if (!dataList[item].dictValue) {
						this.$message.error(dataList[item].remark + '不能为空');
						return;
					}
				} else {
					return;
				}
			}
			updateDataList(dataList).then(() => {
				this.$message.success('编辑成功');
				this.getList();
			});
		},
		reset() {
			this.form = {
				reChargeType: 1,
				value: 1,
				type: 1,
				id: '',
				remark: '',
				time: [new Date(2016, 9, 10, 8, 0), new Date(2016, 9, 10, 18, 0)],
				platformImg: ''
			}
		},
		submit() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					if (!this.mobile) {
						this.$message.error('用户不存在');
						return;
					}
					let str = '';
					if (this.form.type === 1) {
						str = '是否给用户充值?';
					}
					if (this.form.type === 2) {
						str = '是否减少用户余额?';
					}
					this.$confirm(str, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						recharge(this.form).then((res) => {
							if (res.data.code === 200) {
								this.$message.success('操作成功!');
								this.clearForm();
							} else {
								this.$message.error(res.data.msg);
							}
						});
					});
				} else {
					return false;
				}
			});
		},
		clearForm() {
			this.mobile = false;
			this.$refs.ruleForm.resetFields();
		},
		getUserInfo() {
			if (this.form.uuid.length !== 6) return;
			getUser({
				id: this.form.uuid,
			}).then((res) => {
				if (res.data) {
					this.mobile = res.data.mobile ? res.data.mobile : '暂无手机号';
				}
				this.flag = !res.data;
			});
		},
		submitForm() {},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.form {
		width: 600px;
		margin: 40px auto 0;

		.tips {
			height: 31px;
			background: #f7f7f7;
			border-radius: 0 0 4px 4px;
			line-height: 31px;
			color: #f14a46;
			padding-left: 16px;

			span {
				color: #808a97;
			}
		}
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		padding-left: 26px;
		padding-top: 25px;
	}
}
</style>
